<template>
  <div class="main">
    <el-card class="bokeListClass">
      <div class="itemClass" v-for="item in 10" :key="item">
        <div class="divClass" v-if="item % 3 !== 0">
          <h1 class="h1Class">
            <span>这里是有一丢丢长的标题{{ item }}</span>
          </h1>
          <div class="baseInfoClass">
            <span>
              <el-icon><Clock /></el-icon>
              发表于&nbsp;&nbsp;{{ '2023-7-29' }}
            </span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span>
              <el-icon><View /></el-icon>
              阅读: {{ 346 }}
            </span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span>
              <el-icon><ChatLineSquare /></el-icon>
              评论: {{ 13 }}
            </span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span>
              <el-icon><Star /></el-icon>
              推荐: {{ 46 }}
            </span>
          </div>
          <p class="pClass">
            摘要： 一、从行为上 GET请求用来从服务器上获取数据。 POST请求用来向服务器提交数据。 二、从参数形式上
            GET请求将表单中的参数数据以name=value的形式，添加到所指向的URL后面，并且使用了‘‘ ? ’’进行连接，而各自的参数变量之间使用‘’ & ‘’链接。
            POST请求是将表单参数数据放在
          </p>
          <div class="authorClass">
            <el-icon><Avatar /></el-icon>
            &nbsp; 作者: 放大飒飒
          </div>
        </div>
        <div v-else class="hasPiclass">
          <div class="leftClass">
            <h1 class="h1Class">
              <span>这里是标题{{ item }}</span>
            </h1>
            <div class="baseInfoClass">
              <span>
                <el-icon><Clock /></el-icon>
                发表于&nbsp;&nbsp;{{ '2023-7-29' }}
              </span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>
                <el-icon><View /></el-icon>
                阅读: {{ 346 }}
              </span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>
                <el-icon><ChatLineSquare /></el-icon>
                评论: {{ 13 }}
              </span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>
                <el-icon><Star /></el-icon>
                推荐: {{ 46 }}
              </span>
            </div>
            <p class="pClass">
              摘要： 闭包函数有3个特点： 函数嵌套函数 函数内部可以引用外部的参数和变量 参数和变量不会被垃圾回收机制回收 优点：可以避免全局变量的污染。
              缺点：闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
              定义：当一个函数A的返回值是另一个函数B，而返回的那个函数B如果调用了父函数A的内部变量，如果...
            </p>
            <div class="authorClass">
              <el-icon><Avatar /></el-icon>
              &nbsp; 作者: {{ '放大飒飒' }}
            </div>
          </div>
          <div class="rightClass">
            <el-image style="width: 100%" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeMount, reactive, ref } from 'vue'
</script>

<style lang="scss" scoped>
h1 {
  margin-bottom: 10px;
  margin-top: 0;
}
.h1Class > span {
  cursor: pointer;
  display: inline-block;
  background-image: url(../../assets/homePageBGC.webp);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: right bottom;
  transition: background-size 0.3s ease-out;
}
.h1Class > span:hover {
  background-size: 100% 2px;
  background-position: left bottom;
}

.main {
  display: flex;
  width: 100%;
  justify-content: center;
}
.bokeListClass {
  z-index: 10;
  width: 65%;
}
.itemClass {
  padding-bottom: 18px;
  padding-top: 18px;
  width: 100%;
  border-bottom: 1px solid #d8d8d8;
  .baseInfoClass {
    display: flex;
    span {
      font-size: 14px;
      display: flex;
      align-items: center;
      color: #a09d9d;
    }
  }
}
.pClass {
  margin-right: 10px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  line-height: 1.5;
  font-size: 16px;
}
.hasPiclass {
  position: relative;
  display: flex;
  .leftClass {
    flex: 2;
    .authorClass {
      display: flex;
      align-items: center;
      position: absolute;
      color: #a09d9d;
      bottom: 0;
    }
  }
  .rightClass {
    flex: 1;
  }
}

.authorClass {
  display: flex;
  align-items: center;
  color: #a09d9d;
}
</style>
